منم الله الركمن الرحي 


8 


اعداد: عبدالرحمن محجوب حمد mahagob @yahoo.com‏ 0 
Tel: 0919574573‏ 
جميع حقوق النشر محفوظة للمؤلف 
© 


09ہ 
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Preserlaliok 


الحمد لله رب العالمين › الرحمن الرحيم › مالك يوم الدين › نشهد أنه لا إله إلا هو رب 
السموات والأرضين › ونصلي على نبيه المصطفي الأمين م › وعلى آله وصحبه أجمعين › 


السلام عليكم ورحمة الله وبرکاته a:‏ 
يقول المتنبئ: 
خير جليس في الزمان كتاب 


هذا كتاب بذلت فيه كل ماالسطعت » وأرجو من الله معلم داؤود أن يعلمنا ومفهم سليمان أن 
يفهمنا » أتناول فيه لغة البرمجةلليي هي إبايي تعلم اللغات البرمجية الأخرى › تلك اللغة الأسهل 


أقدمه بین آيدیكم راجيا من الله أن تعالئ أن بكو الصا لوجه -تعالی- تم يفيدكم ويحوز على 


رضاکم وتجدوا فيه بغیتکم › 
وما کان من توفيق فمن الله » وما كان من خطأ أو زللآآو نسيان فمني وأرجو من الله أن يغفره 


ا 


وجزاكم الله خیرا “ 


E-mail: a_mahagob @yahoo.com 
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0.1 

basic information: 

Name: Abdurrahman mahagob hamed Abdullah. 
Place & birth date: almehireba — 2/2/1986. 
Address: Gazera state - hasahisa locality - city 

of almehireba. 

Language: Arabic & English. 

Tel: 0919574573. 

E-mail: a mahagob@yahoo.com 


Level Education: » 
e Primary: algods(almehireba). 
e Secondary: ibn maja(almehirebag. 
e University: alMehireba Technical 


Corrss Trainings : 
e Fore months and half in(M 2607. 
Experience : 
e Assistant of teacher techmical laboratory fore ten months 2008 - 
2009(MTC). 


Skills 
e Design et pages forf(HTML & front page). 
e Instal erating Systems. 


e ™€Eorfîputer maintains and collector. 
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نبدأ الدرس الأول بالتعرف على هذه اللغة ومتطلباتها ›› 


أولاً : ما هي هذه اللغة ؟ وفيم تستخدم ؟ 
ماھ لغ HTM.‏ 

وهي 5ر Sl qil‏ ن Hyper Text Markup Language‏ . 
ومعناها :- لغة تكلقية النصوص › الحرفية " لغة المغالاة في ترقية النص ' . 


وتستخدم هذه اللغة فرهبرمجةعىإنشاء صفحات الإنترنت وبالتالي مواقع الإنترنت المختلفة > وهي 
من أسهل اللغات وأبسطها ف إووهكيله المجال . وكما ذكرت فهي الأسهل والأساس . 


ثانيا : ما هي مميزات هذه اللغة ن یڑ م 
لهذه اللغة ميزات عديدة عل أهمها : 
1- عدم ارتباطها بنظام تشغيل معين “وبالتالي هي تعمل على أي جهاز وبأي نظام تشغيل . 


2 إمكان استعراض الصفحات المبرمجة بها م#هكل# القرص الصلب دون الإحتياج إلى 
رفعها إلى خادم إنترنت . 


3- يتم مباشرة تفسير الأوامر من قبل أي مستعرض إiتر Internet Explorer & i‏ 
Fire Fox & Netscape‏ 


4- بساطة قواعد اللغة فلا توجد بها قيود كثيرة . 
5- إمكان إدراج ملفات الوسائط المتعددة أو aزdعصن)‏ اا" مما يعطي الطيفحة وليوية أكثر . 
6- إمكان ربط الصفحات ببعضها بأوامر بسيطة مما يسهل التنقل بينها . 


7 يمكن الإطلاع على كود أي صفحة مما يعطي الباحث إمكانية معرفة الملايين من الأمثلة 
والأكواد . 


ثالثاً : ما هي متطلبات العمل بهذه اللغة ؟ 
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ليس للعمل بهذه اللغة متطلبات خاصة وإنما متطلباتها متوفرة على كل جهاز وعلى كل نظام 
شل ومن هتما حا ج : 


1-برنامج لكتابة الأوامر » وهو ليس برنامجا خاصا » بل أي محرر نصوص ك 4هممعNot‏ 
WordPad‏ &. 


2 متمتعرش لترجمة الأوامر وعرض التصميم » وقد ذكرنا الأمثلة أعلى . 
3 هم في ذلك كله ألا وهو : معرفة الأوامر أو الأكواد . 


وأعلم أن هباك پر امج صممت لكتابة الأكواد کبرنامج P1۲ €٥de۲‏ فھو برنامج جید جدا بحق 
فهو يقوم بتلوين ليام بالوان محددة فيكون الإطلاع عليها أسهل » وكذا يلون الاوامر الخاطئة 
بلون محدد أيضا مما يسهل المراجعة الفورية وتصحيح الخطأً » فمن كان عنده هذا البرنامج أو 
غيره فخير › وإلا فالمقكرة'إأو 24مع)0" تكفي بإذن الله . 


*ما هی الاکواد*؟ 

الأكواد أو كما يسميها البعض الوسوم 1۸68 ما هي إلا مجموعة من الرموز تتيح التحكم في 
عرض النصوص والصور والجداول وماإلى فلكم 

والسمة العامة في تلك الوسوم أنها لها بداية ونهاية (كاقبتتياء إإوسوم التي ليس لها تأثير وإنما هي 


للإضافة كوسم الصور مثلا فهو يدرج الصورة وليب له تأثير ) › يبدأ تأثير الوسم على كل 
الكائنات (الأشياء مثل النصوص متلا ) بكتابة أمر البگلهقلالذي غالبا ما يكرن شكله <1۸6> 


ای و ا التمانة (الإغلاق) والذي یکون شکله <۲۸6/*؛ 


وللعلم فإن لغتنا هذه لا تعتدد بالترتیب بمعنى <DÊG w=# h=#> jÎ‏ هي <TAG h=#‏ 
w=#>‏ 


ولا بالمسافات بمعني أن <6 1۸6<>1۸> هي <6 1۸> <6 1۸> . 
كما لا تعتد بالحروف الكبيرة C۴١۸٣‏ أر ااجإء بمعنى أنها هي هي <عه)> . 


ولكن :-_ تعتد بالمسافات وسط الكلمات بمعذ نها تتعامل مع 'بسم الله " على أنها كلمة واحدة 
وتتعامل مع بسم الله على أنها كلمتين . ويظهر هذا كثيرا معها . فلو أن لديك ملف إسمه عام 
.1 مثلا فلكي تتعامل معه اللغة بشكل سليم يجب وضعه بين علامتي تنصيص '"' . 
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كما أن الأمر يبطل بإضافة مسافة بينه وبين القوس الفاتح مثل <1۸6 > ولا يضر المسافة مع 
الغالق < 1۸6> . 


أرجو أن يكون الأمر مفهوما . 


وبهذا نكون قد تعرفنا على هذه اللغة ومميزاتها ومتطلبات العمل بها ونكون أنهينا الدرس الأول 


۴11e<s2۷e ..‏ أو ملف>حفظ باسم.. 


® 
3- اختار مكان الملف الذي املا البيانات كما بالصورة : 


Save AS > EZ E 


Bave in | New Folder | a OF EE: 


ly Recent 
Documents 


My ا‎ 


۲ 2 File Rame: . : 
Ay Peatimark. Save az ype: | Tent Documents [tat] ا‎ 


Enêoding: |ansı اا‎ 


ح 
4- اذهب إلى المسار الذي حددته ستجد هناك ملف لصفحة انترنت . کک 


5-قم بعمل ضغطه يمين عليه واختار فتح باستخدام... أو W٤1١...‏ ۸عم0 واختار المفكرة 
(تتوفر هذه الخاصية في ۴× فقط) أما إن كنت تستخدم نظام آخر فهناك خيارات عدة 
لتصل لما نريد مثل : 
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أ- أن تفتح برنامج المفكرة وتختار من قائمة ملفكفتح ثم تختار نوع الملف "كل الملفات" كما 
في الصورة وسيظهر ملفك أمامك اختاره وسيفتح في المفكرة › انظر الصورة : 


File ial. 

Fila of hope: Tet lacuments F.tet] 
2 Test Documents [F. tat] 

EfEodiîg:: AlFil TEE 


عرض المصدر أو View‏ 
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<title> 


عنوان النافذة XX‏ 


<lItitle> 


</head> 


<body> 

محتويات الصفحة 

</body> 

‌ </html> 

هذا نموذج بسيط للصفحة م 
* دائما تبدأ كتابة الآأكواد بالأمر <لصاط> ونتتهي بالأمر <لصاط/> . 
*يكتب عنوان النافذة ومعلومات عن الصفحة بين الأمرين <ل4ءط/>..<head>‏ . 


*يكتب عنوان النافذة الذي يظهر في شريط العنوان للمتصفح بين الأمرين <ع|])ذ)/>..<ه >٤1‏ . 
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*تكتب محتويات الصفحة بين الأمرين <ر0dط/>..<0dyطb>‏ . 


1- يكتب عنوان النافذة (الذي يظهر في شريط العنوان) بهذه الطريقة :- 


<html> 


Q ۴ <html> 
<head> 
<title> 
عنوان النافذة‎ 
<l/title> 
</head><body> 


نصوص 


Ero] This PDF was created using the Sonic PDF Creator. 
To remove this watermark, please license this product at www.investintech.com 


وغيرها.. 

</body> 

</html> 

مثال:- 

افتح لف اللهك ة (كما سبق شرحه) واكتب فيه الأمر التالي: 
<html>‏ 

بسم الله الرحمن الركيم 

</html> 

ثم تابع خطوات فتح الصفحة کهیحلمت بجا حفظ الأمر. 

ستشاهد صفحة مكتوب في عنوان نافذتههاميهار الملف ومحتواها فقط'بسم الله الرحمن الرحيم" . 
تمرین:- 

اكتب الكود اللازم لصفحة مكتوب فيها الفاتحة وعتواق) النافذة البسملة . 


وهناك الخاصية ٣ذ‏ وهي عامة بعض الشيء إذ يمكن(/إستخدامها مع أمر البداية وكذا أوامر 
الصفحة والفقرات والجداول وغيرها 0 


وعملها أنها تحدد اتجاه عمل الصفحة يعني من اليمين إلى اليسار أو تكسي وكذا بالنسبة للفقرات 
والجداول وغيرها › وتأخذ قيمتين هما : 


11 = اختصارا ل ا۴٥1 t٥‏ أإعذR‏ يعني من اليمين لليسار . 
ا = اختصارا ل اطعذا t٥‏ ٤۴ع‏ يعني من اليسار لليمين . 


وأيضا وهو الأهم :- الترميز بمعنى أن تبين الترميز المكتوب به الصفحة وخصوصا إذا احتوت 


-10- 
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اتر افة بغضن التنيء فلس ها مجالها ء كل ما عللك قله فو فسخ النضن التالى ووضعة بعد 
أمر الرأس <لهعط> وهو يبين نوع الملف والترميز و 


<meta http-equiv='"'content-type'' content='"'text/html; 
Charest=windows-1256''> 


أما عن كتاي عنو ان للصفحة (وليس النافذة) وتنسيق الفقرات فهو موضوع الدرس القادم إن شاء 


الله . 


تنسبة , الصفحه و الفقر اث ase Î ormat‏ 


الأمر الرئيسي هنا هر < هتاه <م/> . 
ونستخدم معه بعض الخراص منل هد 
۳= قد سبق شرحها . 
رعا وتعبر عن اتجاه الفقرة وهذا هو الشرح ج 
1- لكتابة نص ومحاذاته لليمين نستخدم الأمر التالي: ع 
palign=right >ضصill </p>‏ 
2- لكتابة نص وتوسيطه نستخدم الأمر التالي:- 
<p align=center>‏ 
الق 
</p>‏ 
3- لكتابة نص ومحاذاته لليسار نستخدم الأمر التالي:- 


<P> 


E 
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التصرن 
</p>‏ 

ملاحظة:- لم نحدد الإتجاه في الأخير لأنه يكتب تلقائيا لليسار . 
4- لبد ايقوسطر جديد نستخدم الأمر التالي:- 


Ar 


5- لعمل خط#فاطل نستخدم الأمر التالي :- 


<hr> 


1 


ویستخدم معه 4 خواص 
Width‏ لتحدید عرضه . “ XX‏ 
1۵ لتحدید سمکه . 
وتأخذان قيمة عددية أو نسبية كما ستعرف 
0۳ لتحدید لونه . & 
<hr align=” place” width=”# size”=# color=""'#.....'>‏ 


مثال:- 


لتصميم صفحة ثل هذه : 


EAS 
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Fil Edit view Favorites Tools HElp 2 Mm 


atk 2 1# 2 2 J sear SF Favorites jÎ media f‏ ج 


# 


GÎ Search w- 7 herk ¥ 2# 


Google. u] Ê U ıeobeaet 


قول باللسان 
وتصديق بالجنان 


وعمل بالجوارح والأركان 


<7 


يكون الكود كالتالي:- 


<html> 


<head>‏ ت 


<title> 


الإيمان 


</title> 


</head> 


۰ <body> 


<p align=right> 


قول باللسان 


EE 
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</p> 

<br> 

<p align=center> 
وتصديق "ټالجنان‎ 

</p> 

<br> 

<p> 

وعمل بالجوارح والأركان 


</> </html></body> 


+ a 


ont Î ormattins طوط¦خiئا‎ 


الأمر المستخدم مع النصوص هو 0٥1<‏ فواختامه <أ١«ه؟/>‏ وتستخدم معه خصائص 
أيضا مثل :- 


1- لتغيير حجم الخط نستخدم الأمر التالي :- 

<font size=# > 

النضن 

</font> 

حيث # تعبر عن رقم حجم الخط ويستخدم لها القيم من 1 إلى 7 . 
* كيفية استخدام الأمر:- 


بک ا بئة يقة بين أ بدابة فقر ة نهابت 
يكتب الامر الهيئة السابقة بين أمر بداية الفقرة ونهاي 
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مثال:- لكتابة "لا إله إلا الله" 

بأكبر خط ممكن في وسط الصفحة يكون الكود كما يلي:- 
<p align=center>‏ 
<font §ize*#7 >‏ 
لا الله 
</font>‏ 
</p>‏ 
2- لتلوين الخط يستخك#وااتسر التالي:- 

<font color 'to1Iér nıanد¢ع''>ضنلا‎ </font> 
red, blue ... : حيث ٥صھہ آإم‌امء تعبر عن إسم اللون متٿل‎ 
ويمكن بدل استخدام إسم اللون استخدام قيمتهالرقمية‎ 
: والتي تتيحها بعض البرامج ويكون شكل الأمر‎ 
<font color=#number> 
شى‎ 
</font> 
. # حيث يكتب الرقم بعد علامة‎ 
-: لتغيير نوع الخط نستخدم الأمر التالي‎ 3 
<font face="'font name''> 


الأض 
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</font> 
Traditional Arabic: Jٽa تعبر عن إسم الخط‎ f٥٤ ہ4٤ حیث‎ 
. وهو الخط المكتوب به هذه الصفحة التي تقرأً‎ 
وللتعديلع بسيط يدمج أوامر الخط‎ ** 
(الكجيهللون والنوع) في الأمر التالي:-‎ 
<font size=# color= coloBfame 
face="'font nûnîe">صنill‎ </font> 


4 خصائص الخط 4 


- خط عریض : <8 لنش 85> 

ویمکن استخدام <strong>...</strong>‏ 

- خط مسطر: <ل/> النص <0> 

-خط مائل: ۶ />لنص <[> 

- خط يعترضه خط: <S>tekt</S>‏ 
<strike>....</strılkê>‏ 

أعلى من الث المجاؤر: SUP>.....</SUP>‏ 

خير أسفل: <SUB>.....</SUB>‏ 

ملاحظة :- 


دائما في الجمع بين الأوامر يراعى الترتيب بينها وبين خواتيمها :- 


<B> <U> <[Þ> 
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اصن 

</I> </U> </B> 

**وتكتب هذه الأوامر بين أمر بداية الخط ونهايته مثل:- 

<p> 

<font size=3 color=''"'#101288'"' face=Tahdnmıa> 
>B> >> >[< النص‎ >/[< >/€> >/8>< 


</font> 


ddress TF aseؤحaفصنلا نوان‎ 


يمكنك استخدام الأوامر السابقة لكتابتة كما يمكنك استخدام الأمر التالي:- 
<h#>......<h#>‏ 
حيث تعبر # عن الأرقام من 1: 6 والتي تعبر عر مستىى العنوان والرقم 1 هو الأكبر . 
ويستخدم لتوسيطه أو للتوسيط عموما الأمر :- 
</center>‏ lلمرlد‏ تyugطCelInter>a<‏ 
مقال :- 
عنوان 1 
عنوان 3 
عنوان 6 


<center> 
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<h1/> 1 عنوان‎ >h1< 
>h3/<3 <13>عنوان‎ 
<h6/<> 6 ناونع>h6<‎ 


</cefter> 


تلوين الخلفية و تحريك النص أده ground‏ 


عرفت من الدرس السابق آلا مجتويات الصفحة تكتب بين 
الأمر <0dyط>‏ و </body>‏ » 

تلون الخلفية بأمر بسيط جدا وهو إطافة الأےر_010۲ءعط 
بعد الأمر 0Q‏ على النحو التالي :- 

<body bgcolor=color name> 

ويمكن أيضا استعمال رقم اللون كما سبق . 

صورة الخلفية 

لوضع صورة كخلفية للصفحة يستخدم الأمر التالي :- 

<body background='"'filename'" > 

حيث ۴111408 إسم ملف الصورة بامتدادها ء› 

ويمكن استخدام مسار الصورة في الشبكة أو الجهاز 


كما ستعرف فى درس الصور إن شاء الله . 
-18- 


Ero] This PDF was created using the Sonic PDF Creator. 
To remove this watermark, please license this product at www.investintech.com 


لتحريك النضص : 
يجب استخدام الخاصية MarJue٤‏ 


مال : 


<Marquee>well com in HTML ...</Marquee> 
well com ıa HTML use desten internet pases 


تستخدم معه وتستخدم بح Mar gue‏ وهي : 


ceo ۴ c0c0c0‏ هي لعمل خلفیة 
للنص المتحرك كما في الشكل اعلا 


Direction‏ :رمي حركة اتجاه النکى سيوا كان )16۴ او ع٣‏ والافتراضي هو 
.left‏ 


<Marquee Directio=”ٌەأşa@î ”اسم اللون#”=010۲ءbgc ”ام‎ < 
</Marquee> 


Behavior °‏ :وهي اتجاه سلوك النص وتستخدم معه الخ ص صي طالتالية: 
(51146هو الافتراضي وهو يارجح النص من اليمين الي اليسار ولاينؤقك) ي( 


مtاternaاميارجح‏ النص من اليمين الي اليسار والعكس تماما) و (۴011 )كالح النص 
مرة واحدة ويتوقف لايعمل الا اذا ضغط على .Refresh ڍl F5‏ 


<Marquee Direction=”ەlجتîll‎ pw” bgcol0or=”#ùنوئأll‎ pw” Behavior 
<اسم الخاصية التي تريد استخدامها”-‎ 
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</Marquee> 


صوت الخلفيةل ”ەك ground‏ 


يهخدى )ل <ل 29011 0> لإضافة صوت كخلفية للصفحة ويكتب بعد الأمر <إل0طا> 
SBOdy>‏ 
<bgsond srce="'file name'"" loop=”#...........7 >‏ 


ولا يتعامل هذا الأر إ 3&2 إمتدادات فقط 2۷-11-1 وللتغلب على هذا هناك طريقة 
أخرى ستعرفها في درس االقائط . 


حيث يكتب إسم الملف بعد الخاصية )8۴ . وهنا أيضا مسألة المسار وستتعرف عليها لاحقا . 


وم100 تعبر عن عدد مرات تكرار التشغيل › ويمكن إعطائها القيمة ع1١10۴1‏ للعمل 
اللانهائي طالما الصفحة مفتوحة . 


ablesJ الجداو‎ 


تعد الجداول من أهم وأفضل الأدوات لتنظيم المعلومات بطريفة لهناسبة ولعل من مميزات هذه 
اللغة هو إمكانية إنشاء الجداول من خلالها . 


" قد يصادفك أمور لا تفهمها فاصبر فالتوضيح بعدها وإن لم تفهم فاسأل . 
*لإنشاء جدول يكون الأمر الرئيسي <ع1طه)> وختامه <€[ه)/> . 


=DIir‏ قد سبق شرحها 
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معا لتحديد محاذاة الجدول في الصفحة أفقيا (۲ععء,)؟م][,tاع1ا)‏ واليسار هو 
الإفتراضي . 


48 لتحديد عرض الجدول . وتأخذ قيمة رقمية أو نسبية (ستتعرف عليهما في درس 
ا 


. لێکگید ارتفاعه‎ Het 
. «تحديب لون خلفية الجدول‎ 8 c0٣ 
. لتحديد المسافة بين كل خلية من خلايا الجدول‎ 1s acing 


ng @‏ addiمpااe‏ لتحديد المسافة بين الحدود والنصو. 


**الأمر الرئيسي للخلايا هر <> وختامه >/)d<‏ . 


ويختص ببعض الخواص متل :- 

1 لتحديد اتجاه محتويات الجدول/ أفقيا ر(٤©1ع ٥۴,٥‏ [,٤ع١۲)‏ والوسط هو الإفتراضي . 
align‏ لتحد اتجاهها رأسيا (عd1ل1‏ .86)01 مص]) و اليسار هو الإفتراضي 
ءاه لدمج هذا الخلية مع العدد المحدد من الخلايا إلثالية لها أفقيا ويكون على هذا الشكل 
<td colspan=# > ......</t(d>‏ 

spanس"۸‏ للدمج الرأسي (أعمدة) ويكون على نفس الشكل السابق . 
وللعلم فإن كل خلية يتم دمجها يجب حذف أوامرها . 
ويمكن استخدام باقي الخواص معه إلا أن التطبيق سيكون على الخلية فقط . 

***الأمر الرئيسي للصفوف <ا)> وختامه <])/> . 
ويمكن استخدامها مع أوامر الصفوف أيضا ليتم التنفيذ على الصفوف فقط . 


1. لإنشاء جدول ذو حواف نستخدم الأمر الآتي :- 
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<ع[طها/> محتويات الجدول من صفوف و أعمدة<1عb0۲ <table‏ 
وأعني بجدول ذو حواف أي له إطار يفصل مكوناته عن الصفحة 


ولإزالة الحد نحذف كلمة 00۲Q٥١‏ كما أنه يمكننا تحديد سمك هذا الحد بوضع قيمة للخاصية 
border=#‏ . 


2 شاپ هيك جديد نستخدم الأمر التالي :- 
<٣ا/>‏ محتويات الصف من خلاي۲<۱)> 


وأحيانا يحذف الأمك»الخاش <۲)/> وعند بداية كل صف يكتفى بالأمر البادي <٣ا>‏ 


الأمر التالي :- 


<td align=place > ةıll‎ mi /<محتر‎ d< 
-: ولتحديد عرض هذا العمود يكون' للشكليكالاتي‎ 
<td width=# valı$n=place >ٽlugتحnll‎ </td> 
-: لإنشاء خلية عادية نستخدم الأمر‎ .4 
<td valiga*place alig¬=place>iılill محتويات‎ </(d< 
وعبرت في الشرح بمحتويات الخلية ولم أعبر بالنص لأنها تحتمل أي كهيء‎ 
... فيها كالصور ونحوها‎ 


ولاحظ أني في كل مرة أضيف خاصية وأحذف آخرى دليلا هلى أنه يمك ن كر ضههي خاصية 
ويمكن حذف أي خاصية ما دمت لا تحتاجها . 


PAS 
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E 


از > 


إنشاء دول چهدا 


5 
¢ 


@ 
» 


e 


-: يكون الكود كما يلي‎ 
able border bgcolor="#b3b3b3"> 
<tr> 

<td align=center> 

عدد الركعات 


‌ </td> 


<td align=center>‏ م 
& 


E 
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<td align=center> 
2 
</td> 


<td OS, 
الفجر‎ 


ا 
</td>‏ 


٠ <tr> 


¢ 
<td align=center> 


S77 1 
</td> 

<td align=center> 

الظهر 

</td> 

<tr> 

<td align=center> 

4 

</td> 


<td align=center> 


العصر 
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</td> 
<I> 


<td align=center> 


<td ali8DEcÊnter> 
۰ المغرب‎ 

» 
</td> 


XX <tr> 

<td align=center> 

4 

</td> 

<td align=center> 

العشاء 

</td> 

</table> 

ولاحظ أنه لا يفصل بين خلايا الصف الواحد ب >٣<‏ 

وأيضا نكتب بطريقة عكسية لأن كل البرامج تقريبا أصلها اليسار. 
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ويستخدم الأمر التالي لإضافة عنوان للجدول ككل ويكتب بعد أمر الجدول مباشرة :- 
<capti01> jl ill </caption>‏ 


عند بداية دراسة هذه اللغة وتغلبت عليه الحمد لله وإلا فما كان هذا الكتاب بين يديك الآن › 


#لخلية الت هاهخاصية التي تريدها بالقيمة التي تريدها بهذا الشكل < TT‏ 
#لصف أكتب الخ اصية ,التي تريدها بالقيمة التي تريدها بهذا الشكل < a‏ 


#للجدول كله أكت# الخاإصية التي تريدها بالقيمة التي تريدها بهذا الشكل عاطها> 


أظنه الآن سهلا وما سيسهله أكثر N‏ لجلبافك ولابد أن تظهر لك مشاكل حتى تتعلم ولكن عليك 


Multi Medias ددعتتnll‎ طئlwgll‎ 


اللغة هو إتاحتها لإضافة الصور والوسائط المتعددة إذ أن شكل الصفحة لعل من أهم ما يميز هذه 
کثیراً لو لم تکن بها صور أو أصوات أو فلاشات أو ...الچ كان سيختلف 


Q 


[mages الصور‎ 


الأمر الأساسي المستخدم هنا هو <1> وليس له ختام . 


ویستخدم معه خواص هذا بیانها . واحفظها جیدا لأنها ستتكرر كثيرا ولن أشرحها في گل مرة 


لكي نضيف صورة إلى صفحتنا لابد من معرفة د بعض هذه الكلمات التي سنستخدمھها كيرا 
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الملف = S1٥‏ وتستخدم لتحديد الملف (الصورة ) المطلوب عرضه . 

الإتجاه = 41181 يعبر عن مكان عرض الصورة بالنسبة للنص (يمين .يسار .أعلى.أسفل..) . 
الإرتفاع = عع يعبر عن ارتفاع الصورة › وتأخذ قيمة عددية أو نسبية . 

البروض ا1س يعبر عن عرضها » وتأخذ قيمة عددية أو نسبية . 


الحد ٥9۲de‏ یعبر عن سمك الخط الذي تحد ډه الصورة ویستخدم کٽیرآً مع 
الإرتباطاكه 


الوصف = ا1ةكفظه النص المكتوب كخلفية عند الوقوف على الصورة أو عند عجز 


وبعد التعرف على هذه المللاني هذا شل الأمر الرئيسي :- 
<img src="image filename" align=” place “‏ 

heights widfh=# border=# alt="text"> 

حيث ع4٣1‏ عا1؟ image‏ تعبر عن إسم ملكالصورة بالإمتداد › 

و )×ع) تعبر عن النص المراد عرضه عند الوقوفكر علي الصورة › 

و 1408 تعبر عن مكان عرض الصورة وتأخذ القيم :- 

zيكون‏ أول سطر من النص المجاور لها عند أعلى نقطه فيها و“اقوسطلسطور أسفلها. 
الكذب جماع كل شر وأصل كل ذم» لسوء عواقبه» وخبث نتائجه» لأنه ينتج النكة» 
والنميمة تنتج البغضاءء والبغضاء تؤول إلى العداوة وليس مع العداوة أمن ولا راحة. 

. نقطة فيها‎ لفسأ-B‎ 0t) 
الكذب جماع كل شر وأصل كل ذم» لسوء عواقبه» وخبث نتتائجه» لأنه ينتج النميمةء‎ 
والنميمة تنتج البغضاءء والبغضاء تؤول إلى العداوة وليس مع العداوة أمن ولا راحة.‎ 


2= 
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. فصتنملا-M1ddاe‎ 


الكذب جماع کل شر وأصل کل ذم» لسوء عواقبه» وخبث نتائجه» لأنه ينتج النميمة» 
والنميمة تنتج البغضاءء والبغضاء تؤول إلى العداوة وليس مع العداوة أمن ولا راحة. 


1 R-تكون‏ الصورة إلى اليمين من النص ويكون إلى يسارها على عدة أسطر حسب 
ارتټاعجا. 


الكذب كيا كل شر وأصل كل ذم» لسوء عواقبه» وخبث نتائجه» لأنه ينتج النميمةء 
و النميمة ننهاليغهأءء والبغضاء تؤول إلى العداوة وليس مع العداوة أمن ولا راحة. 


١ اليسار‎ =Left 


والنميمة تنتج البغضاء»ء والبعظا نزول إلى العداوة وليس مع العداوة أمن ولا راحة. 


وهذا يستخدم فقط لتحديد أعلى أو لفك أ وسط رأسياً أو يمين أو يسار أفقيا بالنسبة للخط أما 
التو سيط الأفقي فستخدم له الأمر ع 


>C€Ite1< ا لأر 4الخاق اھر ر ة5‎ >/center> 
=+ وأبسط هذا الأمر‎ ** 
<img src="image file name" > 


أي أنه يصح حذف أي من الخصائص ما دمت لست بحاجة اليه ولكني أنصح بعدم حذف 
خاصتي العرض والإرتفاع لأن الإخلال بهما قد يؤدي إلى خلل ف4يمظهر الصفحة نتيجة لان 
المستعرض لو لم يستطع عرض الصورة فهذا يعني أن الحجم المكونس لها سيختل فيخل 


وهناك خاصيتين إضافيتين تحددان الفراغ المتروك إلى جانب الصورة رأجيا أفقيا قبل بداية 
اللصن سنا وها بت 


. للمسافة الرأسية‎ = VSP 
. للمسافة الأفقية‎ =Hspace 


0. 
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<img srce="" vspace=# hspace=# > 


الكذب جماع كل شر وأصل كل ذم» لسوء عواقبه» وخبث نتائجه» لأنه ينتج النميمةء 

والنميمة تنتج البغضاءء والبغضاء تؤول إلى العداوة وليس مع العداوة أمن ولا 

راحة.الكذب جماع كل شر وأصل كل ذم» لسوء عواقبه» وخبث نتائجه»ء لأنه ينتج النميمة» 
والنميمة تنتج البغضاء»ء والبغضاء تؤول إلى العداوة وليس مع العداوة أمن ولا راحة. الكذب جماع 
كل شرج وأضصل كل ذم» لسوء عواقبه» وخبث نتائجه» لأنه ينتج النميمة» والنميمة تنتج البغخضاءء 
والبغصا ىنويل "إلى العداوة وليس مع العداوة أمن ولا راحة.كنت أبحث عن نص أتمم به الأمثلة 
فوجدت هف إلحكمة لإجميلة فقررت وضعها علها تفيد شيئًا ولا تنسوني من صالح دعائكم . 

وبما أققا دگينا القيمة النسبية والعددية فهذا بيانهما :- 


القيمة العددية ی عرص أو ارتفاع أو حجم بالبكسل وهو وحدة قياس عرص 
وارتفاع الصور ودقتها ثلا الصورة في المثال عرضها=468 بكسل وارتفاعها=60 بكسل . 


أما القيمة النسبية :- فنكراك بالنپبد إلائوية من عرض أو ارتفاع الشاشة وتكون على هذه 
الهيئة :- 


. وھكذا‎ helght3" 500" أو‎ Width="100%" 
مثال:-‎ 


لو أردنا عرض صورة کهذه مذلا :- 


يكون الكود كالتالي :- 


<irm§ src="ghybah.gif" align=right” 


width=”468” heigh=”60” border=0 alt='ãيصن'‎ > 


ويشترط لكتابة ملف الصورة أن يكتب بالإمتداد وأن تكون الصورة في نفس ١‏ لمجلد مع ملف 
ا 
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وإلا كتب مسار الصورة كامل سواء من الكمبيوتر أو من الإنترنت . 
فمثلا :- عنوان الصورة السابقة على الإنترنت هو :- 
http://members.lycos.co.uk/ashy gq/pic/ghybah. gif‏ 
فبد لا أرج تكتب ملف الصورة فقط يجب عليك كتابة المسار كاملا . 
ومثال کیا الگمبیوتر :- 
G:\html\piQgfybah. gif‏ 


وللعلم فإن الصور افع الإستخدام في الإنترنت نوعين فقط هما عء[-2[ للصور الثابتة » و 
اع للصور المتحركته 


ولتتم الفائدة فلا تتتقل إلى دريس آ#ر ي حتى تجرب كل أمر مما سبق بنفسك وإن صادفتك 


مشكلة ما علبك وى الال ك 
@ 


الصو ات Audios‏ 


1- لإضافة صوت إلى الصفحة نستخدم الأمر التاليج 


<embed src="filename" width=# 


height=# autostart="case" loop=case> 


هذا الأمر عام للغاية فهو الأصل في إضافة كلا من الصوت والفيدلالفلاش مع بعض 
ا 


وترمز ٤11۸٣4۳8‏ إلى إسم الملف بالإمتداد مع مرعاة مسألة المسار كما مر هي الطور . 
والطول والعرض هنا لواجهة البرنامج المشغل . 
tstar)‏ ترمز إلى التشغيل التلقائي › 


و C468‏ تعني الحالة وهي :- 
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إما ما٣‏ أي تمكين › 
أو 48[ يعني إلغاء . 


9 ترمز إلى إمكانية تكرار الملف وتأخذ نفس القيمتين السابقتين 


ا الصوت كخلفية دون عرض واجهة التحكم إحذف اطعاعط & طdtاس‏ أو اجعل 
شاوية للصفر مع جعل الملف يعمل تلقائيا . 


ê 2‏ بزر تحكم فقط دون عرض الواجهة يضاف الأمر 
controls=' PlayButton"‏ 
ويكون أمري العرض والإر ن بالزر. 
n £‏ 8 
أمتله:- 
لعرض ملف كهذا:- 


embed src=http://www.1islamway.com/e1d.rpm 


wıidth=300 height=70 autostart="false" > 


يكون الكود :- 


<embed src=http://www.1slamway.com/e1d.rpm 
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width=35 heilght=25 autostart="false" 
controls=" Play Button"> 

ملاحظة هامة :- 

لابد أن تكؤزن مصلا بالشبكة لكي تعمل الملفات السابقة 


وأن يگن ليث أي مشغل ريال بلاير . 


1- لإضافة فلاش إليي الصفحة نستخدم الأمر التالي :- 


<embed src="filenange" widif=# height=# >‏ 
fسwء‏ أظن أن الأمر مفهوم وغالبا ما يكن امتداد الفلاش 
فیعد برنامج ولیس بفلاش . e‏ ×ع‌آما امتذاد 


**أأسف لعدم عرض فلاش كمتال لأن البرنامج الذي 


لإضافة فيديو إلى الصفحة نستخدم الأمر التالي :- 
<embed src="filename" width=#‏ 
height=# autostart="case" >‏ 

وقد جربت العمل بهذا الأمر مع امتدادات كثير فلم يفلح إلا مع 


تاlilnWindows‎ Media Player. 
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COloleloicle Id 
#٦ وهذا هو الكود‎ 


<embed src="http://Mmambters.lIycos.co.uk/ 
ashy gq/papaghaa.wmv" width=400 height™330 autostart="false"_> 


الا تباطات )ہا | 


تخيل أخي الكريم أنك عندما تزور موقعاما فاتة ليك كتابة عنوان كل صفحة فيه علىحدة لكي 
تستطيع الدخول إليها !هذه اللغة حلت تلك المشكلة اهو الإرتباطات التشعبي Hyper Link gÎ‏ 
؟هو ربط كائن ما ( نص.صورة.. ) بعنوان ما .هذا أب4ظ وف له . 


ولنتعرف سويا على هذه المصطلحات :- 

yHyper Text Transfer Protocol —_ رlصتخ| ھ„‎ http 
وهو بروتوكول نقل الملفات النصية ( مستندات ا۲M] ) هذا أصله‎ 
. ويستخدم حاليا في نقل المستندات المكتوبة بجميع اللغات‎ 

. File Transfer Protocol —H رlصآتخا‎ „a FTP 

وهو برتوكول نقل الملفات من وإلى الخادم . 

وذكرت هذه المصطلحات رغم عدم أهميتها لأن نسيانها 

يعد مشكلة كبيرة. ولنبدأ درسنا ... 
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** لإضافة رابط عموما نستخدم الأمر التالي :- 


العنوان الذي يوجد في الصفحة > <a href="ةحêصلنl مul.html" title=" descript10”¬"‏ 


<ه/>الرئيسية 

› الصفحة عن الصفحة المراد الوصول اليها‎ mE 
ل‎ 

ڪ 1pUONn‏ عن الوصف آي النص المراد عرضه 


<a href="addresg# title» description"> 
SG : ا ا‎ 
</a> 

لعرض رابط کھذا :- 


قع ناد | 


يكون الكود كالتالي:- 


f="http://www.almreek.net" title=" 


۱ “</a> 


<font acd "Traditional Arabic" color=blue> 
<لا/> <ط/>موقع نادي المريخ<u> <ط>‎ 


</font> 
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</p> 


</a> 


ولا تنس او ا اأ ب MM‏ 


a hfêf="http://www.islamsites.jeeran.com" > 
<img sS ttp://www.1islamsites.Jeeran.com/1slam. gif" alt= 
1 "أدخل ا ذد‎ 


border=0 width=” 468” height=”607>‏ م 
</a>‏ & 


. http & fp JÛ هذا بالنسبة‎ * 


*أما البريد الإلكتروني فيكون شكل الأمر هكذا :- 
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<a href="mailto:E-mail" title="">jئlكll‎ </a> 
. ويكتب البريد الإلكتروني المراد بدلا من 1نةہ-8‎ 


لعرضرر ابطع بريد کهذا:- 


<a href="mailto:a_mahagob @ yahod.com" title= 


<"أرسل اقتر ا 

XX ® <p align=center> 

<font face='"'Traditional Arabic'" color=blue> 
<b> <u> 

‌ البريد الإلكتروني‎ 
</b> </u> 

</font> 

</p> 

</a> 

وأما الربط بجزء من الصفحة 

فيكون الأمر على الشكل التالي:- 

<a name="text 1''> 


الكائن 1 
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8 
ول هو الخاص بالمكان المرادالوصول إليه ويكتب في المكان نفسه › 1 1٠×٤‏ 
ي والكائن 1 هو المراد الوصول إليه . ويكتب الجزء الثاني في أي مكان من 
الصفحة ويكون للا الحلة للجزء الأول » والكائن 2 هو الذي سيكون وصلة .وقد حذفت 

م لأبين أنها لست وأستايية . أما الربط بأعلى الصفحة فيكون بهذا الشكل :- 


<a herf="#top} <‏ 
مال 
لربط الصور 
يكون الكود :- 


آ 
ر <a name="pictures">s‏ 
وهذا مکكانه هناك 
أما هنا :- 

<ھ/> لربط الصور < "١عاا) <a href="‏ 
ملاحظة هامة :- 
8 


1- عند الضغط على وصلة مصنوعة بإحدى الطرق السابقة فإنها تفتح الملفنفسه في نفس 
النافذة ولجعلها تفتحه في نافذة جديد نضيف TT‏ بعد كتابة العنوان . 


2- في البريد الإلكتروني سيقوم بفتح البريد الإفتراضي لديك ك 0oهOut1‏ 


7 
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دليل أوامر اللغة الأساسية 


Xo‏ أكواد الصفحة 


<html>.......... 

r </head> 
<title> 
<body> 


رأس للصفحة 


<body bgcc تلوين الخلفية‎ 


<body backgr§thd="" > صورة للخلفية‎ 
<bgsound src=" loop=# > صوت للخلفية‎ 


a<p align="" >....... إضافة فقرة  /<ط/>‎ 


<font size=# col01="#." التحكم في خصائص‎ 
face=""> الخط‎ 


بداية سطر جديد ٠|‏ بداية سطر جديد |<اط> 


<hr width=# size# خط ا‎ 
bgcolor=""> 


982 
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أكواد الجدول 


پلدراج جدول <table> ..... </table>‏ | 
إإراج صف <U>........... <ltı>‏ 
١‏ إدراچ خلية عنوان <th>......... <lth>‏ 
زاج خلية عادية See </td>‏ 
إككافقغخنريان للجدوJ‏ |  <caption>....</caption>‏ | 


آ 


لتحريك النص </marquee>‏ 
الخصائص المستخدمة مع الارتباطات التشعبية ( 
لون النص ”اسم اللون ”=ا×e‏ 1 


لون الوصلة التي تم ”اسم اللون ”=)ہVl1‏ 
زیارتها 
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الخصائص المستخدمة مع الارتباطات التشعبية تكتب بعد ال< ............... <Body‏ 


XJ‏ المصادر 


2 موقع كتب www.kotuB.1nf0‏ 


ML[ګH‏ تاليف :احمد ۱ 
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الحمد لله الذي بنعمته تتم الصالحات » والصلاة والسلام على المصطفی نبيه ع ءالحمد لله الذي 
ايقظ روح الامل والتفاؤل من جديد في كل دقة تنعكس على مسار العمل وايجاد المختصر المفيد 
لهذه اللغة وبعدي»»› 


E E هذا‎ 


وهذا الكتاك أنه لمن لا يعرف شيئا عن اللغة أو للمتوسطين › ليس أبدا للمحترفين › فهناك 
مواضيع كثيرة في للغة أغفلتها في هذا الكتاب عمدا مثل النماذج والإطارات لأنه لا يجدر 
بالمبتدء معرفتها أو الذخول فيها دون إتقان لما ورد في هذا الكتاب من أساسيات اللخة › 

وأعلم أن تعلم شيء كهذا ليمستالسهل ولا باليسير وإنما بالجهد والجد والتفكير . 


ولا تنسوني إخواني من دعوة صالكة چن هاه غيب عسى أن يغفر الله لي بها تقصيري › 


والله ولي التوفين ي 


E-mail: a_mahagob @ yahoo.com اعداد: عبدالرحمن محجوب‎ 
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